<template>
  <div>
    <!-- 头部开始 -->
  <div style="height: 60px;background-color: #202b78;display: flex; align-items: center ">
    <div style="width: 200px; display: flex; align-items:center; font-size: 20px;color:white ;padding-left: 15px">
      <img style="width: 40px" src="@/assets/coffee.png" alt="">
      <span style="font-size: 20px;color:white;margin-left: 5px">后台管理系统</span>
    </div>
    <div style="flex: 1"></div>
    <div style="width: fit-content;display:flex;align-items: center;padding-right: 10px">
      <img :src="data.user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt="" style="width: 40px;height:40px;border-radius: 50%">
      <span style="color: white;margin-left: 5px">{{data.user.name}}</span>
    </div>
  </div>
    <!-- 头部结束 -->

    <!-- 下面部分开始 -->
    <div style="display: flex">
      <!-- 左侧导航菜单开始 -->
      <div style="width: 200px;border-right: 1px solid #ddd;min-height: calc(100vh - 60px)">  <!-- 最小高度 -->
        <el-menu router :default-active="router.currentRoute.value.path" :default-openeds="['1']"  style="border:0"> <!--1与下面index的1对应-->
          <el-menu-item index="/manager/home">
            <el-icon><House /></el-icon>
            系统首页
          </el-menu-item>
          <el-menu-item index="/manager/data">
            <el-icon><DataAnalysis /></el-icon>
            数据统计
          </el-menu-item>
          <el-menu-item index="/manager/article">
            <el-icon><Document /></el-icon>
            文章管理
          </el-menu-item>
          <el-menu-item index="/manager/department">
            <el-icon><OfficeBuilding /></el-icon>
            部门管理
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/manager/admin">管理员信息</el-menu-item>
            <el-menu-item index="/manager/employee">员工信息</el-menu-item>
          </el-sub-menu>
        <el-menu-item index="/Manager/person">
          <el-icon><InfoFilled /></el-icon>
          个人信息
        </el-menu-item>
          <el-menu-item index="/Manager/password">
            <el-icon><Lock /></el-icon>
            修改密码
          </el-menu-item>
        <el-menu-item @click="logout">
          <el-icon><SwitchButton /></el-icon>
          退出登录
        </el-menu-item>
        </el-menu>
      </div>
      <!-- 左侧导航菜单结束 -->

      <!-- 右侧主体区域开始-->
      <div style="flex: 1 ;width: 0;background-color: #dddddd;padding: 10px">
        <RouterView @updateUser="updateUser"/><!-- 接受person.vue发射的事件，@后面是事件的名字，后面是方法的名字 -->
      </div>
      <!-- 右侧主体区域结束-->
    </div>
    <!-- 下面部分结束 -->
  </div>
</template>

<script setup>
  import router from "@/router/index.js";
  import {reactive} from "vue";

  const data = reactive({
    user: JSON.parse(localStorage.getItem('xm-pro-user'))//将JSON字符串转化为JSON对象使用。数据传输，本地存储，跨语言转换等需要用到字符串，直接操作对象用JSON对象
  })

  const logout = () =>{
    localStorage.removeItem('xm-pro-user') //清除当前登录的用户缓存数据，先清除再跳转
    location.href = '/login' //退出到登录页面
  }

  const  updateUser = () => {
    data.user = JSON.parse(localStorage.getItem('xm-pro-user'))
  } //子级更新父级名称
</script>

<style>
.el-menu .is-active {
  background-color: #e6ecf7 !important;
} /*高亮颜色*/

.el-sub-menu__title {
  background-color: white !important;
}/*二级标题高亮不设置颜色*/
</style>
